<form class="form-props-info-scroll layui-form temTableProps" lay-filter="temProps">
  <div class="form-props-title">
    单元格属性
  </div>
  <div class="layui-collapse" lay-accordion>
    <div class="layui-colla-item">
      <h2 class="layui-colla-title">基本属性</h2>
      <div class="layui-colla-content layui-show">
     

          <div class="form-props-item">
              <label>宽度</label>
              <input type="text" name="tableWidth"  autocomplete="off" class="layui-input temInput" temPropOpt='width' optName=''>
          </div>

         


          <div class="form-props-item temColor" temPropOpt='background-color' optName=''>
            <label>背景颜色</label>
            <div class="layui-input-inline" style="width: 170px;">
              <input type="text" class="layui-input temColorInput">
            </div>
            <div class="layui-inline" style="left: -11px;">
              <div class="temColorVal"></div>
            </div>
          </div>

          <div class="form-props-item">
            <label>内边距</label>
            <input type="text" name="tagPadding" autocomplete="off" class="layui-input temInput" temPropOpt='padding' optName='' >
          </div>



          <div class="form-props-item">
            <label>边框位置</label>
            <div>
                <input type="radio" name="tableBorderPlace" lay-filter="tableBorderPlace" value="left" title="左">
                <input type="radio" name="tableBorderPlace" lay-filter="tableBorderPlace" value="right" title="右">
                <input type="radio" name="tableBorderPlace" lay-filter="tableBorderPlace" value="top" title="上">
                <input type="radio" name="tableBorderPlace" lay-filter="tableBorderPlace" value="bottom" title="下">
            </div>
          </div>



          <div class="form-props-item temSelect tableBorder"  temPropOpt='border-left-style' optName=''>
            <label>边框样式</label>
            <select name="tableBorderStyle" lay-filter="temSelect">
                <option value="dashed">dashed</option>
                <option value="dotted">dotted</option>
                <option value="double">double</option>
                <option value="solid">solid</option>
                <option value="hidden">hidden</option>
              </select>
          </div>

          <div class="form-props-item">
            <label>边框宽度</label>
            <input type="text" name="tableBorderWidth"  autocomplete="off" class="layui-input temInput tableBorder" temPropOpt='border-left-width' optName=''>

          </div>



          <div class="form-props-item temColor tableBorder" temPropOpt='border-left-color' optName=''>
            <label>边框颜色</label>
            <div class="layui-input-inline" style="width: 170px;">
              <input type="text" class="layui-input temColorInput">
            </div>
            <div class="layui-inline" style="left: -11px;">
              <div class="temColorVal"></div>
            </div>
          </div>

 
          

      </div>
    </div>
    <div class="layui-colla-item">
      <h2 class="layui-colla-title">高级属性</h2>
      <div class="layui-colla-content">

        <div class="addPropsTitle">
          <span>添加属性</span>
          <i class="layui-icon layui-icon-add-1 addProperty"></i>   
        </div>
        <div class="addPropsHandle" optName='' defPropName='class'>
          <div class="form-props-input">
            <input type="text" autocomplete="off" class="layui-input propKey">
            <input type="text" autocomplete="off" class="layui-input propVal">
            <i class="layui-icon layui-icon-delete itemDel"></i>   
          </div>

          
        </div>

      </div>
    </div>
  </div>
</form>

<script>
    layui.use([], function(){
      var $ = layui.$,
      form = layui.form,
      propsHandle = layui.propsHandle,
      temPropOpt = 'temPropOpt',
      tag = $('.selectStamp');

// 公共方法

      // 处理边框
      function tableBorderOpt (val){
          $('.temTableProps .tableBorder').each(function(i,item){
            var opt = $(item).attr(temPropOpt);
            var rep = opt.split('-')[1];
            var newOpt =  opt.replace(rep,val);
            $(item).attr(temPropOpt,newOpt)
          })
      }


// ---------init赋值
      propsHandle({
        "tableBorderPlace":"left",
      })

     

      
      

//  -----------附加操作---------


     form.on('radio(tableBorderPlace)', function(data){
           tableBorderOpt(data.value);
           propsHandle({
              "tableBorderPlace":data.value,
            })
      });




    });
</script>